import React, { Component } from 'react'
import {connect} from 'react-redux';
import { clean_action, jia_action, jian_action } from '../../../store/store';
class NumShop extends Component {
    render() {
        return (
            <div className='numshop'>
                <div className="top" onClick={()=>{this.props.topClick()}}>

                </div>
                <div className="div">
                        <h4>已选商品</h4>
                        <p><span className='iconfont icon-trash'></span><span onClick={()=>{this.props.clean()}}>全部删除</span></p>
                    </div>
                <div className="bottom">
                    
                    {this.props.list.map((item)=>{
                        return (
                            <div className="shop" key={item.id}>
                                <div className="img">
                                    <img src={item.pic} alt=""/>
                                </div>
                                <div className="txt">
                                    <h4>{item.name}</h4>
                                    <p>￥<span>{item.money}</span>元</p>
                                </div>
                                <div className="num">
                                    <span onClick={()=>{this.props.jian(item.id)}}>-</span>
                                    <span>{item.count}</span>
                                    <span  onClick={()=>{this.props.jia(item.id)}}>+</span>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}
export default connect(
    (state)=>{
        return {
            list:state.catList
        }
    },
    (dispatch)=>{
        return {
            clean:()=>{
                dispatch(clean_action())
            },
            jia:(id)=>{
                dispatch(jia_action(id))
            },
            jian:(id)=>{
                dispatch(jian_action(id))
            }
        }
    }
)(NumShop)
